<style lang="css" scoped>
.img-sign {
  margin: 10px;
  width: 200px;
  height: 200px;
}
</style>
<template>
  <div>
    <Card title="评估公司" ref="card">
      <a href="#" slot="extra" @click.prevent="GetCompanySign">刷新</a>
      <Button size="large" type="primary" icon="ios-add" v-on:click="AddArea">新增</Button>
    </Card>
    <Modal :mask-closable="false" v-model="modal2" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>{{ typeName }}</span>
      </p>

      <Form ref="formItem" :model="tempData" :label-width="80">

        <FormItem label="公司名称" prop="Name">
          <Input v-model="tempData.Name"></Input>
        </FormItem>
        <FormItem label="公章照片" prop="SignImg">
          <Upload multiple ref="upload" :show-upload-list="false" :on-success="handleSuccess"
            :before-upload="handleBefore" :format="['jpg', 'jpeg', 'png']" :max-size="3072"
            :on-format-error="handleFormatError" :action="uploadurl" :headers="uploadheader" :data="uploadname">
            <Button type="primary" :loading="uploading" size="large" icon="ios-cloud-upload-outline">上传公章照片</Button>
          </Upload>
          <div v-if="tempData.SignImg"><img img-sign class="img-sign" :src="tempData.SignImg"></div>
        </FormItem>

      </Form>
      <div slot="footer">
        <Button type="primary" size="large" @click="SaveCompanySign">保存</Button>
      </div>
    </Modal>

    <Table class="margin-top-10" border :columns="tableTitle" :data="tableData" ref="table" :height="tableHeight">
    </Table>
  </div>
</template>
<script>
import { Message, Modal } from "view-design";
import { getToken, baseUrl } from "@/libs/util";
import {
  GetCompanySign,
  SaveCompanySign,
  DeleteCompanySign
} from "@/api/data";
export default {
  name: "company_sign",
  data() {
    return {
      uploadheader: {
        Authorization: "Bearer " + getToken()
      },
      uploadname: {
        name: "companyImgs"
      },
      uploadurl: "api/Data/UploadImg",
      uploading: false,
      tableHeight: 450,
      modal2: false,
      tableTitle: [
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.tempData = params.row;
                      this.typeName = '修改评估公司'

                      this.modal2 = true;
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.DeleteCompanySign(params.row.Gid);
                    },
                  },
                },
                "删除"
              ),

            ]);

          }
        },
        {
          title: "评估公司",
          key: "Name"
        },

      ],
      tableData: [],
      typeName: "新增评估公司",
      tempData: {
        Gid: "",
        Name: "",
        SignImg: '',
      },

    };
  },
  methods: {
    handleBefore() {
      this.uploading = true;
    },
    handleFormatError(file) {
      this.uploading = false;
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: "仅支持'jpg','jpeg','png'图片格式"
      });
    },
    handleError() {
      this.$Modal.error({ title: "提示", content: "上传失败" });
      this.uploading = false;
    },
    handleSuccess(res, file) {
      let vm = this;
      if (res.Type == 1) {
        vm.tempData.SignImg = res.Data
      } else {
        this.$Notice.error({
          title: "上传失败",
          desc: res.Message
        });
      }
      this.uploading = false;
    },
    clearTemp() {
      this.typeName = "新增评估公司";
      this.tempData = {
        Gid: "",
        Name: "",
        SignImg: '',
      };
    },
    AddArea() {
      this.clearTemp();
      this.modal2 = true;
    },
    GetCompanySign() {
      let vm = this;
      GetCompanySign().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.tableData = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SaveCompanySign() {
      let vm = this;
      if (!this.tempData.Name) {
        Message.error("评估公司名称不能为空");
        return;
      }
      SaveCompanySign(this.tempData).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.modal2 = false;
          vm.clearTemp();
          vm.GetCompanySign();
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    DeleteCompanySign(id) {
      this.$Modal.confirm({
        title: "提示",
        content: "确定要删除吗？",
        onOk: () => {
          DeleteCompanySign(id).then((res) => {
            const data = res.data;
            if (data.Type == 1) {
              this.GetCompanySign();
              this.$Modal.success({ title: "提示", content: "删除成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => { },
      });
    },
  },
  created() { },
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight =
      window.innerHeight - cardHeight - 160;
    this.GetCompanySign();
  }
};
</script>
